<template>
	<div style="padding:0px;">
		<el-card class="box-card">
		  <div  class="text item" >
			  <el-form :model="dialogForm" ref="dialogForm" :label-width="formLabelWidth" :rules="rules">
			     <brandSelect v-if="dialogForm.carBrandId||dialogForm.carBrandId==null"  :pinpaiId="dialogForm.carBrandId" :zipinpaiId="dialogForm.carSubBrandId" :chexiId="dialogForm.carSeriesId" :isDisabled="!dialogSendData.isAdd||dialogSendData.id!==''" v-on:receive-brand-data="receiveBrandData" :formLabelWidth="formLabelWidth" level=2></brandSelect>
			    <el-form-item label="汽车车型名称"  prop="name">
			      <el-input v-model="dialogForm.name"  auto-complete="off" :disabled="!dialogSendData.isAdd"></el-input>
			    </el-form-item>
			     <el-form-item label="汽车车规"  prop="carSpecificationId">
			      <el-select v-model="dialogForm.carSpecificationId" :disabled="!dialogSendData.isAdd">
				  	<el-option label="请选择汽车车规" value=""></el-option>
				    <el-option v-for="(item, index,i) in carSpecifications" :label="item.name" :value="item.id" :key="i"></el-option>
				  </el-select>
			    </el-form-item>
			     <el-form-item label="指导价(万)"  prop="price" class="currency">
			      <el-input type="number" v-model.number="price"  auto-complete="off" :disabled="!dialogSendData.isAdd"></el-input>
			      <span class="convertCurrency">{{dialogForm.price|convertCurrency}}</span>
			    </el-form-item>
			     <el-form-item label="上市年份"  prop="yearType">
			      <el-input  type="number" v-model="dialogForm.yearType"   auto-complete="off" :disabled="!dialogSendData.isAdd"></el-input>
			    </el-form-item>
			     <el-form-item label="级别"  prop="sizeType">
				  <el-select v-model="dialogForm.sizeType" :disabled="!dialogSendData.isAdd">
				  	<el-option label="请选择级别" value=""></el-option>
				    <el-option v-for="(item, index,i) in carTypeLevels" :label="index" :value="item" :key="i"></el-option>
				  </el-select>
			    </el-form-item>
			     <el-form-item label="销售状况"  prop="saleState">     
			      <el-select v-model="dialogForm.saleState" :disabled="!dialogSendData.isAdd">
				  	<el-option label="请选择销售状况" value=""></el-option>
				    <el-option v-for="(item, index,i) in carTypeSales" :label="index" :value="item" :key="i"></el-option>
				  </el-select>
			    </el-form-item>			    
			  </el-form>
			</div>
		</el-card>
		<div  style="text-align:right;margin-top:15px;">
			 <el-button @click="returnBack">返 回</el-button>
			 <el-button v-if="dialogSendData.isAdd" type="primary" @click="submitConfirmForm('dialogForm')">提 交</el-button>
		</div>
	</div>
</template>
<script>
    import agentHttp from '@/utils/agentHttp.js'
    import brandSelect from '@/views/brandSelect/base.vue'
	export default{
		created(){		
			if(this.dialogSendData.id!==""){
	      		this.selectData(this.dialogSendData.id); 
	      	}else{
						this.selectData(0);
					}
					
        },
        components:{brandSelect},
		props:['dialogSendData','tableData'],
		data(){
			return{		
			    maxYear:new Date().getFullYear(),		
				formLabelWidth:'170px',
				//弹窗或者查看页面信息
		         dialogForm:{
		          carBrandId:"",
		          saleState:"",	
		          sizeType:"",	 
		          carSpecificationId:"",
		          price:""        
		        },
		        //验证规则
		        rules: {
		        	name: [
		              { required: true, message: '汽车子车型名称不能为空', trigger: 'blur' }
		            ],
		            carSpecificationId: [
		              { required: true, message: '请选择汽车车规', trigger: 'change',type:"number" }
		            ],
		            /*price: [
		              { required: true, message: '指导价(万)不能为空', trigger: 'blur' }
		            ],
		            yearType: [
		              { required: true, message: '上市年份不能为空', trigger: 'blur' }
		            ],
		            sizeType: [
		              { required: true, message: '请选择级别', trigger: 'change' }
		            ],
		            saleState: [
		              { required: true, message: '请选择销售状况', trigger: 'change' }
		            ],*/
		        },
		        carSpecifications:"",
		        carTypeLevels:"",
		        carTypeSales:"",
			}
		},
		computed:{
				price:{
					get:function(){
						return ((this.dialogForm.price-0)/10000)||""
					},
					set:function(v){
						this.dialogForm.price = Number.prototype.mul(v, this) 
						// this.dialogForm.price=(v-0)*10000
					}
				}
			},
			methods:{
			accMul(arg1) {
						var m = 0, s1 = arg1.toString()
						try {
								m += s1.split(".")[1].length;
						}
						catch (e) {
						}
					
						return Number(s1.replace(".", "")) * 10000 / Math.pow(10, m);
				},
			receiveBrandData(pinpai,zipinpai,chexi,chexing,data){ //依次为 品牌id： 子品牌id:  车系id:  车型id:
				
				this.$nextTick(()=>{
					// console.dir(pinpai)
					this.dialogForm.carBrandId=pinpai;
					this.dialogForm.carSubBrandId=zipinpai;
					this.dialogForm.carSeriesId=chexi;
				})
			},
			returnBack(){
				this.dialogSendData.dialogFormVisible=false;
			},
			
			submitConfirmForm(formName){
				if(this.dialogForm.carBrandId==""||this.dialogForm.carBrandId==null){
		    		this.$message.warning("请选择汽车品牌");
		            return false;
		    	}
		    	if(this.dialogForm.carSubBrandId==""||this.dialogForm.carSubBrandId==null){
		    		this.$message.warning("请选择子汽车品牌");
		            return false;
		    	}
		    	if(this.dialogForm.carSeriesId==""||this.dialogForm.carSeriesId==null){
		    		this.$message.warning("请选择汽车车系");
		            return false;
		    	}
		    	if(this.dialogForm.yearType&&((this.dialogForm.yearType-0)>this.maxYear||(this.dialogForm.yearType-0)<2010)){
		    		this.$message.warning("上年年份在2010到"+this.maxYear+"之间");
		            return false;
		    	}
                this.$refs[formName].validate((valid) => {
		          if (valid) {
		          	if(this.dialogSendData.id===""){
										this.addData();
		          	}else{
									this.editData();
		          	}		          	
		          } else {
		             this.$nextTick(()=>{
		          		this.$message.warning(document.getElementsByClassName('el-form-item__error')[0].innerText);
		                return false;
		          	})
		          }
		        });
			},
		    addData(){
					// console.dir(this.dialogForm)
		        agentHttp.postJson('adminApi/admin/car_type/add',this.dialogForm).then((data)=>{
		            if(data.success){  
		            	this.$emit('refreshTableData', null);
		            	this.$message.success(data.data||"添加成功");
		            	setTimeout(()=>{
		            		this.dialogSendData.dialogFormVisible=false;
		            	},500);
		            } 
		        }) 
		    },
		    editData(){
		    	
		        agentHttp.putJson('adminApi/admin/car_type/update',this.dialogForm).then((data)=>{
		            if(data.success){  
		            	this.$emit('refreshTableData', null);
		            	this.$message.success(data.data||"修改成功");
		            	setTimeout(()=>{
		            		this.dialogSendData.dialogFormVisible=false;
		            	},500);
		            } 
		        }) 
		    },
		    selectData(id){
		        agentHttp.get('adminApi/admin/car_type/view/'+id).then((data)=>{	
							
		            if(data.success){  
		            	this.dialogForm=data.data.dialogForm||{saleState:"",sizeType:"",carSpecificationId:"",price:""};
		            	if(this.dialogSendData.id==""){
                            this.dialogForm.carBrandId=null;
		            	}
		            	this.carSpecifications=data.data.carSpecifications;
		            	this.carTypeLevels=data.data.carTypeLevels;
		            	this.carTypeSales=data.data.carTypeSales;
		            } 
		        }) 
		    },
		}
	}
</script>
